<template>
  <div class="viewer-header">
    <!-- 左侧工具栏 -->
    <div class="header-left">
      <div class="viewer-logo">
        <svg class="svg-logo" viewBox="0 0 120 40" xmlns="http://www.w3.org/2000/svg">
          <text x="10" y="28" font-size="24" font-weight="bold" fill="#409EFF">UCare</text>
        </svg>
      </div>
      
      <div class="tools-group">
        <div class="tool-group">
          <tool-button 
            icon="el-icon-d-caret" 
            :isActive="activeTool === 'StackScroll'" 
            @click="$emit('set-tool', 'StackScroll')"
            title="滚动浏览">滚动</tool-button>
          
          <tool-button 
            icon="el-icon-zoom-in" 
            :isActive="activeTool === 'Zoom'" 
            @click="$emit('set-tool', 'Zoom')"
            title="缩放图像">缩放</tool-button>
          
          <tool-button 
            icon="el-icon-rank" 
            :isActive="activeTool === 'Pan'" 
            @click="$emit('set-tool', 'Pan')"
            title="平移图像">平移</tool-button>
          
          <tool-button 
            icon="el-icon-picture" 
            :isActive="activeTool === 'WwwcTool'" 
            @click="$emit('set-tool', 'WwwcTool')"
            title="窗宽窗位调整">窗位</tool-button>
        </div>
        
        <div class="tool-group">
          <tool-button 
            icon="el-icon-refresh"
            @click="$emit('reset-view')"
            title="重置视图">重置</tool-button>
          
          <tool-button 
            icon="el-icon-sort"
            @click="$emit('invert-image')"
            title="反转图像">反转</tool-button>
          
          <tool-button 
            icon="el-icon-full-screen"
            @click="$emit('toggle-fullscreen')"
            title="全屏显示">全屏</tool-button>
          
          <tool-button 
            icon="el-icon-info"
            @click="$emit('toggle-patient-info')"
            title="患者信息">信息</tool-button>
        </div>
      </div>
    </div>
    
    <!-- 中间的序列选择器 -->
    <div class="header-center">
      <div class="series-selector" v-if="seriesList.length > 1">
        <el-select 
          v-model="selectedSeries" 
          placeholder="选择序列" 
          size="small"
          @change="handleSeriesChange">
          <el-option
            v-for="series in seriesList"
            :key="series.id"
            :label="formatSeriesLabel(series)"
            :value="series.id">
          </el-option>
        </el-select>
      </div>
    </div>
    
    <!-- 右侧操作按钮 -->
    <div class="header-right">
      <el-button size="small" type="primary" plain @click="$emit('back')">
        <i class="el-icon-back"></i> 返回列表
      </el-button>
    </div>
  </div>
</template>

<script>
import ToolButton from './ToolButton.vue'

export default {
  name: 'HeaderToolbar',
  components: {
    ToolButton
  },
  props: {
    activeTool: {
      type: String,
      default: ''
    },
    seriesList: {
      type: Array,
      default: () => []
    },
    activeSeries: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedSeries: this.activeSeries
    }
  },
  watch: {
    activeSeries(newValue) {
      this.selectedSeries = newValue;
    }
  },
  methods: {
    formatSeriesLabel(series) {
      return `${series.modality || ''} - ${series.description || '未知序列'} (${series.number || '?'})`;
    },
    handleSeriesChange(seriesId) {
      this.$emit('load-series', seriesId);
    }
  }
}
</script>

<style scoped>
.viewer-header {
  height: 50px;
  background-color: #2a2a2a;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #3a3a3a;
}

.header-left {
  display: flex;
  align-items: center;
}

.viewer-logo {
  margin-right: 20px;
  width: 90px;
}

.svg-logo {
  height: 30px;
}

.tools-group {
  display: flex;
  gap: 20px;
}

.tool-group {
  display: flex;
  gap: 10px;
}

.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.series-selector {
  width: 300px;
}

.header-right {
  display: flex;
  align-items: center;
}
</style>
